<template>
  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="140px" v-loading="loading">
      <el-row :gutter="24">
        <el-col :span="12" class="mb20">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="性别" prop="gender">
            <el-select v-model="form.gender" placeholder="请选择性别">
              <el-option :value="item.value" :label="item.label" v-for="(item, index) in gender" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="出生年月" prop="birthdate">
            <el-date-picker type="date" placeholder="请选择出生年月" v-model="form.birthdate"
              :value-format="dateStr"></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="籍贯" prop="birthplace">
            <el-input v-model="form.birthplace" placeholder="请输入籍贯" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCard" placeholder="请输入身份证号" maxlength="18" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="招生老师" prop="admissionTeacher">
            <!-- <el-input v-model="form.admissionTeacher" placeholder="请输入招生老师" /> -->
            <el-select v-model="form.admissionTeacher" placeholder="请输入招生老师">
              <el-option :value="item.teacherId" :label="item.teacherName" v-for="(item, index) in teachersList"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="接待老师" prop="receptionTeacher">
            <el-input v-model="form.receptionTeacher" placeholder="请输入接待老师" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <!-- prop="receptionTeacher" -->
          <el-form-item label="班级名称">
            <el-input type="textarea" :rows="2" disabled placeholder="班级名称" v-model="form.className">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="最高学历" prop="highestDegree">
            <!-- <el-input v-model="form.highestDegree" placeholder="请输入最高学历" /> -->
            <el-select v-model="form.highestDegree" placeholder="请输入最高学历">
              <el-option :value="item.value" :label="item.label" v-for="(item, index) in degree" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="紧急联系人" prop="emergencyContact">
            <!-- <editor  v-model:get-html="form.emergencyContact" placeholder="请输入紧急联系人"></editor> -->
            <el-input v-if="visible" type="textarea" :rows="2" placeholder="请输入紧急联系人" v-model="form.emergencyContact">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="居住地址" prop="residenceAddress">
            <!-- <editor v-if="visible" v-model:get-html="form.residenceAddress" placeholder="请输入居住地址"></editor> -->
            <el-input v-if="visible" type="textarea" :rows="2" placeholder="请输入居住地址"
              v-model="form.residenceAddress"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="色盲测试是否合格" prop="colorBlindTest">
            <el-select v-model="form.colorBlindTest" placeholder="请选择色盲测试是否合格">
              <el-option :value="item.value" :label="item.label" v-for="(item, index) in yes_no_type"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="听力水平是否合格" prop="hearingTest">
            <el-select v-model="form.hearingTest" placeholder="请选择听力水平是否合格">
              <el-option :value="item.value" :label="item.label" v-for="(item, index) in yes_no_type"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="身体四肢纹身情况" prop="tattooStatus">
            <el-select v-model="form.tattooStatus" placeholder="请选择身体四肢纹身情况">
              <el-option :value="item.value" :label="item.label" v-for="(item, index) in yes_no_type"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="体内钢板假肢情况" prop="prosthesisStatus">
            <el-select v-model="form.prosthesisStatus" placeholder="请选择体内钢板假肢情况">
              <el-option :value="item.value" :label="item.label" v-for="(item, index) in yes_no_type"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="犯罪记录审查" prop="criminalRecord">
            <el-select v-model="form.criminalRecord" placeholder="请选择犯罪记录审查">
              <el-option :value="item.value" :label="item.label" v-for="(item, index) in yes_no_type"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="传染疾病携带" prop="infectiousDisease">
            <el-select v-model="form.infectiousDisease" placeholder="请选择传染疾病携带">
              <el-option :value="item.value" :label="item.label" v-for="(item, index) in yes_no_type"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="是否需要报名全日制大专" prop="fulltimeCollege">
            <el-select v-model="form.fulltimeCollege" placeholder="请选择是否需要报名全日制大专">
              <el-option :value="item.value" :label="item.label" v-for="(item, index) in yes_no_type"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="身份证复印件(正)" prop="idCardCopy1">
            <!-- <upload-file v-model="form.idCardCopy1"></upload-file> -->
            <upload-img v-model:imageUrl="form.idCardCopy1"></upload-img>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="身份证复印件(反)" prop="idCardCopy2">
            <!-- <upload-file v-model="form.idCardCopy2"></upload-file> -->
            <upload-img v-model:imageUrl="form.idCardCopy2"></upload-img>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="户口本复印件(第一页)" prop="householdRegister1">
            <!-- <upload-file v-model="form.householdRegister1"></upload-file> -->
            <upload-img v-model:imageUrl="form.householdRegister1"></upload-img>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="户口本复印件(本人)" prop="householdRegister2">
            <!-- <upload-file v-model="form.householdRegister2"></upload-file> -->
            <upload-img v-model:imageUrl="form.householdRegister2"></upload-img>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="毕业证复印件1" prop="diplomaCopy1">
            <!-- <upload-file v-model="form.diplomaCopy1"></upload-file> -->
            <upload-img v-model:imageUrl="form.diplomaCopy1"></upload-img>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="毕业证复印件2" prop="diplomaCopy2">
            <!-- <upload-file v-model="form.diplomaCopy2"></upload-file> -->
            <upload-img v-model:imageUrl="form.diplomaCopy2"></upload-img>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="银行卡号1" prop="bankCardCopy1">
            <el-input v-model="form.bankCardNo1" placeholder="请输入银行卡号" />
            <!-- <upload-file v-model="form.bankCardCopy1"></upload-file> -->
            <!-- <upload-img v-model:imageUrl="form.bankCardCopy1"></upload-img> -->
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="银行卡1开户行信息" prop="openingBank1">
            <el-input v-model="form.openingBank1" placeholder="请输入开户行信息" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="银行卡号2" prop="bankCardNo2">
            <el-input v-model="form.bankCardNo2" placeholder="请输入银行卡号" />
            <!-- <upload-file v-model="form.bankCardCopy1"></upload-file> -->
            <!-- <upload-img v-model:imageUrl="form.bankCardCopy1"></upload-img> -->
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="银行卡2开户行信息" prop="openingBank2">
            <el-input v-model="form.openingBank2" placeholder="请输入开户行信息" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24" class="mb20">
          <el-form-item label="银行卡复印件2" prop="bankCardCopy2">
            <upload-img v-model:imageUrl="form.bankCardCopy2"></upload-img>
          </el-form-item>
        </el-col> -->

        <el-col :span="24" class="mb20">
          <el-form-item label="证件照片1" prop="photoCollection1">
            <!-- <upload-file v-model="form.photoCollection1"></upload-file> -->
            <upload-img v-model:imageUrl="form.photoCollection1"></upload-img>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="证件照片2" prop="photoCollection2">
            <!-- <upload-file v-model="form.photoCollection2"></upload-file> -->
            <upload-img v-model:imageUrl="form.photoCollection2"></upload-img>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="体检报告文件路径" prop="medicalReport">
            <upload-file v-model="form.medicalReport"></upload-file>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit" :disabled="loading">确 认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="StudentDialog">

import { useDict } from '/@/hooks/dict';
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj, validateExist, fetchTeachersList } from '/@/api/admin/student'
import { rule } from '/@/utils/validate';
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
const teachersList = ref([])
// 定义字典
const { yes_no_type, gender, degree } = useDict(
  'yes_no_type',
  'gender',
  'degree'
);
// 提交表单数据
const form = reactive({
  id: '',
  name: '',
  gender: '',
  birthdate: '',
  birthplace: '',
  idCard: '',
  phone: '',
  admissionTeacher: '',
  receptionTeacher: '',
  highestDegree: '',
  emergencyContact: '',
  residenceAddress: '',
  colorBlindTest: '',
  hearingTest: '',
  tattooStatus: '',
  prosthesisStatus: '',
  criminalRecord: '',
  infectiousDisease: '',
  fulltimeCollege: '',
  idCardCopy1: '',
  idCardCopy2: '',
  householdRegister1: '',
  householdRegister2: '',
  diplomaCopy1: '',
  diplomaCopy2: '',
  bankCardCopy1: '',
  bankCardCopy2: '',
  photoCollection1: '',
  photoCollection2: '',
  medicalReport: '',
  remark: '',
  bankCardNo1: '',
  bankCardNo2: '',
  openingBank1: '',
  openingBank2: ''
});

// 定义校验规则
const dataRules = ref({
  name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  gender: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
  birthdate: [{ required: true, message: '出生年月不能为空', trigger: 'blur' }],
  birthplace: [{ required: true, message: '籍贯不能为空', trigger: 'blur' }],
  idCard: [{ required: true, message: '身份证号不能为空', trigger: 'blur' }, { validator: rule.letterAndNumber, trigger: 'blur' }],
  phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }, { validator: rule.mobilePhone, trigger: 'blur' }],
  admissionTeacher: [{ required: true, message: '招生老师不能为空', trigger: 'blur' }],
  receptionTeacher: [{ required: true, message: '接待老师不能为空', trigger: 'blur' }],
  emergencyContact: [{ required: true, message: '紧急联系人不能为空', trigger: 'blur' }],
})

// 打开弹窗
const openDialog = (id: string) => {
  visible.value = true
  form.id = ''

  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

  // 获取student信息
  if (id) {
    form.id = id
    getStudentData(id)
  }
};

// 提交
const onSubmit = async () => {
  const valid = await dataFormRef.value.validate().catch(() => { });
  if (!valid) return false;

  try {
    loading.value = true;
    form.id ? await putObj(form) : await addObj(form);
    useMessage().success(form.id ? '修改成功' : '添加成功');
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};

const formatstatus = (num) => {
  if (num || num == 0) {
    let num2 = num + ''
    return num2
  } else {
    return ''
  }
}
// 初始化表单数据
const getStudentData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj({ id: id }).then((res: any) => {
    Object.assign(form, res.data)
    console.log(form);
    form.gender = formatstatus(form.gender)
    form.highestDegree = formatstatus(form.highestDegree)
    form.colorBlindTest = formatstatus(form.colorBlindTest)
    form.hearingTest = formatstatus(form.hearingTest)
    form.tattooStatus = formatstatus(form.tattooStatus)
    form.prosthesisStatus = formatstatus(form.prosthesisStatus)
    form.criminalRecord = formatstatus(form.criminalRecord)
    form.infectiousDisease = formatstatus(form.infectiousDisease)
    form.fulltimeCollege = formatstatus(form.fulltimeCollege)
  }).finally(() => {
    loading.value = false
  })
};
const getTeachersList = () => {
  fetchTeachersList({ current: 1, size: 9999 }).then((res) => {
    teachersList.value = res.data.records;

  })
}
getTeachersList()
// 暴露变量
defineExpose({
  openDialog
});
</script>
